<template>
  <el-config-provider :size="size" :z-index="zIndex">
    <div class="common-layout">
      <el-container>
        <!-- 左侧菜单 -->
        <el-aside width="auto">
          <el-scrollbar :style="'height:'+wh+'px'">
            <!-- 再由父亲把menuopen传给另一个儿子用，传的值用 menuopenS 命名-->
            <tree-menu :menuopenS="menuopen"></tree-menu>
          </el-scrollbar>
        </el-aside>
        <el-container :style="'height:'+wh+'px'">
          <el-header>
            <!-- 面包屑 -->
            <div style=" border-bottom: solid 1px rgb(235, 233, 233);overflow: hidden;">
              <!-- @WWisCollapse="menuopen=$event" 父接收子传的(值)数据$event赋值到menuopen元素 ，WWisCollapse这个是儿子传过来的值的命名-->
              <bread-crumb @WWisCollapse="menuopen=$event"></bread-crumb>

              <div style="display: flex;align-items: center;  float: right; height: 60px;">
                <!-- 全屏组件 -->
                <full-screen></full-screen>|
                <!-- 颜色取样样式组件 -->
                <font-size @fontsizeS="size=$event"></font-size>|
                <color-style></color-style>|
                <!-- 个人信息组件 -->
                <my-self></my-self>
              </div>
            </div>
            <!-- 标签页 -->
            <div class="el-tag-box">
              <keep-alive>

                <tabs-dropdown></tabs-dropdown>
              </keep-alive>
              <!-- <tabs-dropdown></tabs-dropdown> -->
            </div>
          </el-header>
          <el-main>
            <router-view />
          </el-main>
        </el-container>
      </el-container>
    </div>
  </el-config-provider>
</template>

<script>
import TreeMenu from "@/components/TreeMenu.vue";
import BreadCrumb from "@/components/BreadCrumb.vue";
import TabsDropdown from "@/components/TabsDropdown.vue";
import ColorStyle from "../components/ColorStyle.vue";
import FontSize from "@/components/FontSize.vue";
import FullScreen from "@/components/FullScreen.vue";
import MySelf from "../components/MySelf.vue";
import { ElConfigProvider } from "element-plus";
export default {
  components: {
    ElConfigProvider, //全局配置字体大小
    TreeMenu, //左侧菜单组件化的页面到components注册
    BreadCrumb, //面包屑组件化的页面到components注册
    TabsDropdown, //标签页组件化的页面到components注册
    ColorStyle, //颜色样式组件
    FontSize, //字体大小组件
    FullScreen, //全屏
    MySelf, //个人信息
  },
  data() {
    return {
      // // 引入路由
      wh: window.innerHeight, // 窗体高度
      menuopen: false, // 面包屑与左侧菜单展开与折叠的布尔值
      size: "default",
      zIndex: 3000,
    };
  },
  mounted() {
    // 检测窗口的高度变化
    window.onresize = function () {
      this.wh = window.innerHeight;
    };
  },
};
</script>

<style lang="less" scoped>
body {
  margin: 0;
  padding: 0;
}
.el-container {
  height: 100%;
}
.el-header {
  background-color: #fff;
  border-bottom: solid 1px rgb(235, 233, 233);
  color: #333;
  height: 115px;
  padding: 0;
  // 下拉框菜单
  .example-showcase .el-dropdown-link {
    cursor: pointer;
    color: var(--el-color-primary);
    display: flex;
    align-items: center;
  }
  // 标签页
  .el-tag-box {
    width: 100%;
    height: 50px;
    border-bottom: solid 3px rgb(235, 234, 234);
    display: flex;
    align-items: center;
  }
}

.el-aside {
  height: calc(100vh); //自适应
  background-color: #545c64;
  color: #333;
}

.el-main {
  background-color: #fff;
  color: #333;
  padding: 0 20px;
  padding-top: 20px;
}
</style>
